document.ready(function () {
    /*需求:鼠标点击.apiT下的a标签,添加激活样式,.apiText里面的文本相应的改变*/
    // let apiT = document.querySelector('.apiT');
    // let apiTAll = apiT.querySelectorAll('a');
    // let apiText = document.querySelector('.apiText');
    // apiTAll.forEach(function (v, i) {
    //     v.num = i;
    // })
    // let index = 0;
    // apiT.addEventListener('click', function (event) {
    //     if (event.target.nodeName == 'A') {
    //         apiTAll[index].classList.remove('active');
    //         event.target.classList.add('active');
    //         let target = event.target;
    //         index = target.num;
    //         //切换文本
    //         let targetText = target.textContent;
    //         apiText.textContent = targetText;

    //     }
    // })

    //api分类数据渲染页面
    let apiType = function () {
        /*
         * 1. 需求: 模拟api分类数据
        */

        // 获取元素
        let apiT = document.querySelector('.apiType .apiT');
        let apiText = document.querySelector('.apiType .apiText');
        let phText = document.querySelector('.apiType .phText');


        // 模拟api分类数据
        let apiData = [
            { name: '全部', keyword: '身份证实名', isBold: false },
            { name: '生活服务', keyword: '银行卡', isBold: false },
            { name: '金融科技', keyword: '短信', isBold: false },
            { name: '交通地理', keyword: '天气', isBold: false },
            { name: '充值缴费', keyword: '话费', isBold: false },
            { name: '数据智能', keyword: 'AI', isBold: true },
            { name: '企业工商', keyword: 'IP', isBold: false },
            { name: '应用开发', keyword: 'APP', isBold: false },
            { name: '电子商务', keyword: '商务', isBold: false },
            { name: '吃喝玩乐', keyword: '唱跳RAP', isBold: false },
            { name: '文娱视频', keyword: '娱乐', isBold: false },
            { name: '免费接口大全', keyword: '免费接口', isBold: false },
            { name: '短信', keyword: 'ShortMessage', isBold: false },
            { name: '汽车', keyword: '林肯', isBold: false },
            { name: '核验', keyword: '实名信息', isBold: false },
            { name: '最新发布', keyword: '消息', isBold: true },
            { name: 'API私有化部署', keyword: '专属定制', isBold: true },
        ]
        /**
         * 2.需求: 将拼装好的apiData数据渲染到页面apiT中
        */
        let initStr = '';

        apiData.forEach(function (v, i) {
            initStr += `<a data-keyword='${v.keyword}' class='${v.isBold ? 'strong' : ''}' data-num='${i}'>${v.name}</a>`;
        })
        apiT.innerHTML = initStr;


        //获取apiT下所以的a标签
        let apiTChildren = apiT.querySelectorAll('a');
        //设置第一个a标签的激活样式
        apiT.firstElementChild.classList.add('active');


        /**
         * 3.需求: 点击apiT下a标签, 实现搜索联动效果
         */
        let index = 0;
        apiT.addEventListener('click', function (event) {
            let target = event.target;
            if (target.nodeName.toLowerCase() == 'a') {
                apiText.textContent = target.textContent;
                phText.placeholder = target.dataset.keyword;
                let num = target.dataset.num;
                apiTChildren[num].classList.add('active');
                apiTChildren[index].classList.remove('active');
                index = num;
            }
        })

    }
    apiType();


    //api列表数据渲染页面
    let apiList = function () {
        //获取元素
        let u1 = document.querySelector('.apiType .u1');

        // 模拟服务器上的传递过来的数据
        //API列表区域 模拟服务器返回的数据
        let listDataArr = [
            //第一行
            { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
            { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
            { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
            { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
            { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

            //第二行
            { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
            { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
            { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
            { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
            { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
            //第三行
            { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
            { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
            { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
            { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
            { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
            //第四行
            { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
            { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
            { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
            { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
            { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        ]
        // 数据渲染到页面
        //定义初始化拼接字符串
        let apiListStr = '';
        listDataArr.forEach(function (v) {
            apiListStr += `
            <li class="certification">
                <span class='${v.isSpecial ? 'show' : ''}'>企业专用</span>
                <a href="apiDetails.html">
                    <div>
                        <img src="../imgs/${v.img}" alt="">
                        <p>${v.name}</p>
                        <p class='${v.price === '免费' ? 'green' : 'red'}'>${v.price}</p>
                    </div>
                </a>
                <a href="#">申请数据</a>
            </li>`
        })
        
        u1.innerHTML = apiListStr;

    }
    apiList();


    //模态框功能
    let mantle = function () {
        //获取元素
        let u1 = document.querySelector('.apiType .u1');
        // let imgDiv = u1.querySelectorAll('div');
        let mantle = document.querySelector('.mantle');
        let modal = document.querySelector('.modal');

        //事件委派:给共同的父级元素绑定事件
        u1.addEventListener('click', function (event) {
            let target = event.target;
            //点击的事件源是.apiType下的a标签时,显示蒙层
            if (target.nodeName.toLowerCase() === 'a') {
                mantle.style.display = 'block';
            }
        })

        //给蒙层绑定事件,点击蒙层隐藏蒙层
        mantle.addEventListener('click', function () {
            mantle.style.display = 'none';
        })
        //点击的事件源是模态框时,(不隐藏蒙层)阻止事件冒泡
        modal.addEventListener('click', function (e) {
            // event.preventDefault();//阻止浏览器默认行为
            // event.Propagation();//阻止事件冒泡
            e.stopPropagation();
        })
    }
    mantle();


    //选项卡切换
    //获取元素
    let navList = document.querySelector('.modal .navList');
    let navListSpan = navList.querySelectorAll('.navList span');
    let navListContent = document.querySelectorAll('.modal .navListContent');
    //调用选项卡函数并传参数
    tabCard(navList, 'SPAN', navListSpan, 'active', navListContent, 'on');




})